<script setup lang="ts">
import { WINDOW_STYLE_CONSTANTS } from '~shared/constants/layout'

const { VIEW_BORDER_WIDTH, SIDEBAR_VIEW_DEFAULT_WIDTH } = WINDOW_STYLE_CONSTANTS
const props = defineProps<{
  tab: F2.tab.Entity
}>()

const styleVar = {
  styleBw: `${VIEW_BORDER_WIDTH}px`
}

const width = computed({
  get() {
    return props.tab.sidebarConfig?.width ?? SIDEBAR_VIEW_DEFAULT_WIDTH
  },
  set(value: number) {
    _pre_.tab.setWidth(value, props.tab.webContentsId)
  }
})

// 响应式逻辑：当宽度小于300px时折叠按钮
const isCollapsed = computed(() => {
  return width.value < 350
})
</script>

<template>
  <div
    v-if="tab"
    class="sidebar-item position-relative border-sm rounded-lg"
    :style="{
      width: `${width}px`
    }"
  >
    <tab-control-bar :home-url="tab.url" :is-collapsed="isCollapsed" :tab="tab" type="right" />

    <!-- Loading overlay centered and blocking   -->
    <PageLoadingOverlay
      class="rounded-lg sidebar-loading"
      :model-value="tab.nav.isLoading ?? false"
      :url="tab.url"
    />

    <ResizeHandle v-model="width" direction="left" :handle-size="6" :offset="-7" />
  </div>
</template>
<style scoped>
.sidebar-item {
  margin: 0 0 v-bind('styleVar.styleBw') v-bind('styleVar.styleBw');
}
.sidebar-loading {
  margin: 32px 3px v-bind('styleVar.styleBw') 3px;
}
</style>
